<template>
  <panel title="进线柜功率">
    <div class="ml20 mr20">
      <x-row>
        <x-col :span="24">
          <Bar :width="chartWidth" :height="chartHeight" :options="chartOptions"></Bar>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'StallStatistic',

  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null
    }
  },

  mounted () {
    setTimeout(this.initialize, 0)
  },

  methods: {
    initialize () {
      this.chartWidth = `${(this.$el.clientWidth - 40)}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.chartOptions = {
        grid: {
          containLabel: true,
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '10%'
        },
        yAxis: [{
          type: 'value'
        }],
        xAxis: [{
          type: 'category',
          data: ['2栋', '3栋', '4栋', '5栋', '6栋', '7栋', '8栋', '9栋', '10栋']
        }],
        series: [{
          name: '空调用电',
          type: 'bar',
          stack: '电量',
          barWidth: 17,
          data: [221, 543, 330, 373, 529, 434, 732, 323, 520]
        }]
      }
    }
  }
}
</script>
